<template>
	<div class="common-layout">
		<el-table :data="arr">
			<el-table-column label="图片" width="200">
				<template #default="score">
					<el-image :src="`${$Imgurl}/showImg/${score.row.book.picture}`"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称" width="300" />
			<el-table-column prop="book.price" label="商品单价" width="200"/>
			<el-table-column label="商品数量" prop="cart.num"></el-table-column>
			<el-table-column label="商品总价">
				<template #default="score">{{score.row.book.price*score.row.cart.num}}</template>
			</el-table-column>
		</el-table>
		<el-input readonly v-model="sum"></el-input>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-input placeholder="请输入收货地址" v-model="ord.addr"></el-input>
			</el-col>
			<el-col :span="8">
				<el-input type="number" placeholder="请输入电话号码" v-model="ord.phone"></el-input>
			</el-col>
			<el-col :span="4" v-if="show==false">
				<el-button type="danger" @click="this.$store.state.goods=[];this.$router.push('/home/cart')">重新选择</el-button>
				<el-button type="success" @click="makeOrd()">下单</el-button>
			</el-col>
			<el-col :span="4" v-if="show==true">
				<el-button type="primary">订单号：{{ord.ordid}}</el-button>
				<el-button type="success" @click="this.$router.push(`/home/pay?ordid=${ord.ordid}`)">付款</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	//引入拦截器
	import instance from '../../../../ajax'
	
	export default{
		name:'Make',
		data(){
			return{
				arr:[],
				show:false,
				ord: {ordid : 0, addr:'', phone:''}
			}
		},
		created() {
			this.arr=this.$store.state.goods
		},
		methods:{
			makeOrd(){
				this.show=false
				if(this.ord.phone!=''&&this.ord.addr!=''){
					let item=[]
					for(let i in this.arr) {
					   let obj = {
						   bookid : this.arr[i].cart.bookid,
						   price : this.arr[i].book.price,
						   num : this.arr[i].cart.num,
					   }
						item.push(obj)
					}
					instance.post('/api/fore/cart/addCart2Order',item,{
						headers:{'Content-Type':'application/json'}
					}).then((res)=>{
						if (res.data.code==200) {
							let ordObj = res.data.data
							this.ord.ordid = ordObj.ordid
							
							instance.post("/api/fore/ord/addAddr",this.ord,{
								headers:{'Content-Type':'application/json'}
							}).then((res)=>{
								if (res.data.code==200) {
									this.show=true
								}
							}).catch((error)=>{
								
							})
							
						}
					}).catch((error)=>{
						
					})
				}
			}
		},
		computed:{
			sum(){
				let sum=0
				for (let i in this.arr) {
					if (this.arr[i].show==true) {
						sum+=this.arr[i].book.price*this.arr[i].cart.num
					}
				}
				return sum
			}
		},
	}
</script>

<style>
</style>
